<template>
  <div id="close_layer_root">
    <div
      @mousedown.stop="mousedown"
      style="width: 100%;cursor:pointer;height: 15px"></div>
    <div
      @click="closeLayer"
      class="layer_close">
      <icon-font
        class="layer_close_img"
        type="icon-guanbi_Pro">
      </icon-font>
    </div>
    <div style="margin: 0 10px 0;">
      <slot name="layer-content"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CloseLayer',
  methods: {
    mousedown(e) {
      if (this.enableDrag) {
        const container = document.getElementById('close_layer_root')
        const disX = e.clientX
        const disY = e.clientY
        const screenWidth = document.body.clientWidth
        const screenHeight = document.documentElement.clientHeight
        const dragDomWidth = container.offsetWidth
        const dragDomheight = container.offsetHeight

        const minDragLeft = container.offsetLeft
        const maxDragDomOffset = screenWidth - minDragLeft - dragDomWidth
        const minDragDomTop = container.offsetTop
        const maxDragDomTop = screenHeight - container.offsetTop - dragDomheight
        // 获取到的值带px 正则匹配替换
        const domLeft = this.getStyle(container, 'left')
        const domTop = this.getStyle(container, 'top')
        let styL = domLeft
        let styT = domTop
        if (domLeft.includes('%')) {
          styL =
            +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100)
          styT =
            +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100)
        } else {
          styL = +domLeft.replace(/px/g, '')
          styT = +domTop.replace(/px/g, '')
        }

        document.onmousemove = event => {
          let left = event.clientX - disX
          let top = event.clientY - disY

          if (-left > minDragLeft) {
            left = -minDragLeft
          } else if (left > maxDragDomOffset) {
            left = maxDragDomOffset
          }
          if (-top > minDragDomTop) {
            top = -minDragDomTop
          } else if (top > maxDragDomTop) {
            top = maxDragDomTop
          }
          container.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
      return false
    },
    closeLayer() {
      this.$emit('close')
    },
    getStyle(dom, attr) {
      if (window.document.style) {
        return dom.style[attr]
      } else {
        return getComputedStyle(dom, false)[attr]
      }
    }
  },
  props: {
    dragDirection: {
      type: String,
      default: 'left'
    },
    enableDrag: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.layer_close {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 5px;
  background-color: white;
}

.layer_close_img {
  font-size: 20px;
  color: #778496;
  cursor: pointer;
}
</style>
